<template>
	<view class="home-container">
		<!-- 顶部社区选择与公告 -->
		<view class="top-bar">
			<picker mode="selector" :range="communities" @change="onCommunityChange">
				<view class="community-select">
					{{ communities[currentCommunity] }}
					<uni-icons type="down" size="20" color="#fff"></uni-icons>
				</view>
			</picker>
			<view class="notice-bar">
				<uni-icons type="notification" size="20" color="#fff"></uni-icons>
				<scroll-view scroll-x class="notice-scroll">
					<view class="notice-text">{{ notice }}</view>
				</scroll-view>
			</view>
		</view>

		<!-- 头部Banner与欢迎语 -->
		<view class="banner-section">
			<image class="banner-img" src="/static/banner.png" mode="widthFix"/>
			<view class="banner-title">智慧社区已来</view>
			<view class="banner-desc">这一刻，让生活更便捷</view>
		</view>

		<!-- 常用服务 -->
		<view class="section">
			<view class="section-title">常用服务</view>
			<view class="service-grid">
				<view v-for="(item, idx) in commonServices" :key="idx" class="service-item" @click="onServiceClick(idx)">
					<image :src="item.icon" class="service-icon"/>
					<view class="service-name">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<!-- 新手引导 -->
		<view class="guide-banner">
			<image src="/static/guide.png" class="guide-img"/>
			<view class="guide-text">
				<view>新手引导</view>
				<view class="guide-desc">帮您快速了解智慧社区功能</view>
			</view>
		</view>

		<!-- 智慧社区功能区 -->
		<view class="section">
			<view class="section-title">智慧社区</view>
			<view class="community-grid">
				<view v-for="(item, idx) in communityFunctions" :key="idx" class="community-item" @click="onCommunityClick(idx)">
					<image :src="item.icon" class="community-icon"/>
					<view class="community-name">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<!-- 社区活动 -->
		<view class="section">
			<view class="section-title">社区活动</view>
			<scroll-view scroll-x class="activity-scroll">
				<view v-for="(item, idx) in activities" :key="idx" class="activity-card">
					<image :src="item.img" class="activity-img"/>
					<view class="activity-title">{{ item.title }}</view>
					<view class="activity-date">{{ item.date }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { request } from '@/util/request.js';
	export default {
		data() {
			return {
				communities: ['智慧小区', '幸福家园', '阳光社区'],
				currentCommunity: 0,
				notice: '智慧物业功能上线啦，快来体验新功能吧~',
				commonServices: [
					{ name: '我的房屋', icon: '/static/service-house.png' },
					{ name: '访客通行', icon: '/static/service-visitor.png' },
					{ name: '手机门禁', icon: '/static/service-door.png' },
					{ name: '生活缴费', icon: '/static/service-pay.png' }
				],
				communityFunctions: [
					{ name: '停车管理', icon: '/static/community-parking.png' },
					{ name: '人脸录入', icon: '/static/community-face.png' },
					{ name: '在线报修', icon: '/static/community-repair.png' },
					{ name: '投诉建议', icon: '/static/community-complaint.png' },
					{ name: '同住管理', icon: '/static/community-family.png' },
					{ name: '社区公告', icon: '/static/community-notice.png' },
					{ name: '智能客服', icon: '/static/AI-customer-service.png' },
					{ name: '更多', icon: '/static/community-more.png' }
				],
				activities: [
					{ title: '开展扫黑除恶专项斗争', date: '2021-05-15 ~ 2021-12-12', img: '/static/activity1.png' },
					{ title: '创建文明社区 建和谐社会', date: '2021-05-15 ~ 2021-12-12', img: '/static/activity2.png' },
					{ title: '文明社区 共创你我他', date: '2021-05-15 ~ 2021-12-12', img: '/static/activity3.png' }
				],
				showDeclaration: true
			}
		},
		methods: {
			onCommunityChange(e) {
				this.currentCommunity = e.detail.value;
			},
			onServiceClick(idx) {
				if (idx === 0) {
					uni.navigateTo({
						url: '/pages/house/house'
					});
				} else if (idx === 1) {
					uni.navigateTo({
						url: '/pages/visitor/visitor'
					});
				} else if (idx === 2) {
					uni.switchTab({
						url: '/pages/lock/lock'
					});
				} else if (idx === 3) {
					uni.navigateTo({
						url: '/pages/utility/utility'
					});
				}
			},
			onCommunityClick(idx) {
				console.log('onCommunityClick:' + idx);
				if (idx === 0) {
					uni.navigateTo({
						url: '/pages/parking/parking'
					});
				} else if (idx === 1) {
					uni.navigateTo({
						url: '/pages/face-register/face-register'
					});
				} else if (idx === 2) {
					uni.navigateTo({
						url: '/pages/repair/repair'
					});
				} else if (idx === 3) {
					uni.navigateTo({
						url: '/pages/complaint/complaint'
					});
				} else if (idx === 4) {
					uni.navigateTo({
						url: '/pages/family/family'
					});
				} else if (idx === 5) {
					uni.navigateTo({
						url: '/pages/prop-notice/prop-notice'
					});
				} else if (idx === 6) {
					uni.navigateTo({
						url: '/pages/aics/aics'
					});
				} else if (idx === 7) {
					uni.navigateTo({
						url: '/pages/more/more'
					});
				}
			},
			async showDeclarationModal() {
				const resp = await request({
					url: 'owner-server/notice/emergency',
					method: 'GET'
				});
				if (resp.code === 200 && resp.data) {
					console.log(resp.data);
					uni.showModal({
						title: '紧急通知',
						content: resp.data.content,
						showCancel: false,
						confirmText: '确定',
						success: async () => {
							await request({
								url: 'owner-server/notice/readNotice',
								method: 'GET',
								data: {
									noticeId: resp.data.id
								}
							})
							this.showDeclaration = false;
						}
					});
				} else if (resp.code !== 200) {
					uni.showToast({
						title: '获取紧急通知发生异常：' + resp.msg,
						icon: 'none'
					});
				}
			}
		},
		onShow() {
			if (this.showDeclaration) {
				this.showDeclarationModal();
			}
		}
	}
</script>

<style>
	.home-container {
		background: #f6f8fa;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}
	.top-bar {
		padding-top: 100rpx;
		background: linear-gradient(90deg, #4A90E2 0%, #87CEEB 100%);
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: 10rpx;
		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
	}
	.community-select {
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.icon-arrow-down {
		font-size: 40rpx;
		margin-left: 8rpx;
	}
	.notice-bar {
		display: flex;
		align-items: center;
		margin-top: 25rpx;
		color: #fff;
	}
	.icon-notice {
		font-size: 28rpx;
		margin-right: 8rpx;
	}
	.notice-scroll {
		flex: 1;
		height: 32rpx;
		overflow: hidden;
	}
	.notice-text {
		font-size: 24rpx;
		white-space: nowrap;
	}
	.banner-section {
		margin: 24rpx;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(74,144,226,0.08);
		padding: 32rpx 0 24rpx 0;
		text-align: center;
	}
	.banner-img {
		width: 80%;
		margin: 0 auto 12rpx auto;
		display: block;
	}
	.banner-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}
	.banner-desc {
		font-size: 24rpx;
		color: #888;
	}
	.section {
		margin: 24rpx;
		margin-bottom: 0;
	}
	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}
	.service-grid, .community-grid {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.05);
		padding: 24rpx 0;
	}
	.service-item, .community-item {
		width: 25%;
		text-align: center;
		margin-bottom: 24rpx;
	}
	.service-icon, .community-icon {
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 8rpx;
	}
	.service-name, .community-name {
		font-size: 24rpx;
		color: #555;
	}
	.guide-banner {
		display: flex;
		align-items: center;
		background: linear-gradient(90deg, #4A90E2 0%, #87CEEB 100%);
		border-radius: 20rpx;
		margin: 24rpx;
		margin-bottom: 0;
		padding: 20rpx;
		color: #fff;
	}
	.guide-img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	.guide-text {
		flex: 1;
	}
	.guide-desc {
		font-size: 22rpx;
		color: #e0f0ff;
		margin-top: 8rpx;
	}
	.activity-scroll {
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		white-space: nowrap;
		padding-bottom: 12rpx;
	}
	.activity-card {
		width: 320rpx;
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.08);
		margin-right: 20rpx;
		display: inline-block;
		vertical-align: top;
		padding-bottom: 12rpx;
	}
	.activity-img {
		width: 100%;
		height: 120rpx;
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
		object-fit: cover;
	}
	.activity-title {
		font-size: 24rpx;
		color: #333;
		margin: 12rpx 12rpx 4rpx 12rpx;
		font-weight: bold;
	}
	.activity-date {
		font-size: 20rpx;
		color: #999;
		margin-left: 12rpx;
	}
</style>
